<template>
     <div class="data-menu-open" v-if="!show" @click="show = !show">
        <div class="title-font">{{ $t('components.status.632txq5h77k0') }}</div>
    </div>
    <div class="data-menu" v-else>
        <div class="title">
            <div class="title-font">{{ $t('components.status.632txq5h77k0') }}</div>
            <div class="delete"><icon-close @click="show = !show" /></div>
        </div>
        <div class="info-data">
            <div class="info-top">
                <div class="info-today">
                    <div class="data">
                        <div class="data-info">
                            <div class="title1">{{$t('components.status.63cwog7hgi40')}}</div>
                            <div class="img-bg img-bg1">{{ detail.airspaceStatus.sum ? detail.airspaceStatus.sum : 0 }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="info-today">
                    <div class="data">
                        <div class="data-info">
                            <div class="title2">{{$t('components.status.63cwog7hh2w0')}}</div>
                            <div class="img-bg img-bg2">{{ detail.airspaceStatus.declareNum ?
                                detail.airspaceStatus.declareNum : 0 }}</div>
                        </div>
                    </div>
                </div>
                <div class="info-today">
                    <div class="data">
                        <div class="data-info">
                            <div class="title3">{{$t('components.status.63cwog7hh580')}}</div>
                            <div class="img-bg  img-bg3">{{ detail.airspaceStatus.unDeclareNum ?
                                detail.airspaceStatus.unDeclareNum : 0 }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="info-mid">
                <div class="info-today">
                    <div class="data">
                        <div class="text text1">{{$t('components.status.63cwog7hh6s0')}}</div>
                        <div class="data-info img-bg1">
                            <p class="count">{{ detail.deviceStatus.status.sum ? detail.deviceStatus.status.sum : 0 }}
                            </p>
                        </div>
                    </div>
                </div>
                <div class="info-today">
                    <div class="data">
                        <div class="text text2">{{$t('components.status.63cwog7hh840')}}</div>
                        <div class="data-info img-bg2">
                            <p class="count">{{ detail.deviceStatus.status.onlineNum ?
                                detail.deviceStatus.status.onlineNum : 0}}</p>
                        </div>
                    </div>
                </div>
                <div class="info-today">
                    <div class="data">
                        <div class="text text3">{{$t('components.status.63cwog7hhag0')}}</div>
                        <div class="data-info img-bg3">
                            <p class="count">{{ detail.deviceStatus.status.offlineNum ?
                                detail.deviceStatus.status.offlineNum : 0 }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="info-bottom">
                <div class="info-bottom-item">
                    <div class="progress-box">
                        <div class="type type1">{{ $t('components.deviceStatus.63673klcpe40') }}</div>
                        <div class="progress">
                            <div class="progress-img progress-img1" :style="{ width: min ? min : 0 }"></div>
                            <div class="progress-percent">{{ min }}</div>
                        </div>
                    </div>
                    <div class="num num1">{{ detail.deviceStatus.type.min ? detail.deviceStatus.type.min : 0 }}</div>
                </div>
                <div class="info-bottom-item">
                    <div class="progress-box">
                        <div class="type type2">{{ $t('components.deviceStatus.63673klcpgc0') }}</div>
                        <div class="progress">
                            <div class="progress-img progress-img2" :style="{ width: light ? light : 0 }"></div>
                            <div class="progress-percent">{{ light }}</div>
                        </div>
                    </div>
                    <div class="num num2">{{ detail.deviceStatus.type.light ? detail.deviceStatus.type.light : 0 }}</div>
                </div>
                <div class="info-bottom-item">
                    <div class="progress-box">
                        <div class="type type3">{{ $t('components.deviceStatus.63673klcphs0') }}</div>
                        <div class="progress">
                            <div class="progress-img progress-img3" :style="{ width: small ? small : 0 }"></div>
                            <div class="progress-percent">{{ small }}</div>
                        </div>
                    </div>
                    <div class="num num3">{{ detail.deviceStatus.type.small ? detail.deviceStatus.type.small : 0 }}
                    </div>
                </div>
                <div class="info-bottom-item">
                    <div class="progress-box">
                        <div class="type type4">{{ $t('components.deviceStatus.63673klcpgc1') }}</div>
                        <div class="progress">
                            <div class="progress-img progress-img4" :style="{ width: middle ? middle : 0 }"></div>
                            <div class="progress-percent">{{ middle }}</div>
                        </div>
                    </div>
                    <div class="num num4">{{ detail.deviceStatus.type.middle ? detail.deviceStatus.type.middle : 0 }}
                    </div>
                </div>
                <div class="info-bottom-item">
                    <div class="progress-box">
                        <div class="type type5">{{ $t('components.deviceStatus.63673klcphs1') }}</div>
                        <div class="progress">
                            <div class="progress-img progress-img5" :style="{ width: large ? large : 0 }"></div>
                            <div class="progress-percent">{{ large }}</div>
                        </div>
                    </div>
                    <div class="num num5">{{ detail.deviceStatus.type.vehicle ? detail.deviceStatus.type.vehicle : 0 }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang='ts' setup>
import { apiIndexData } from '@/api/index'
const show = ref(true)
//无人机列表（父传子：接收）
const detail: any = defineModel('detail', { default: {} })
const typeSum = detail.value.deviceStatus.type.min + detail.value.deviceStatus.type.light + detail.value.deviceStatus.type.small + detail.value.deviceStatus.type.middle + detail.value.deviceStatus.type.large;
const min = ((detail.value.deviceStatus.type.min/typeSum)*100).toFixed(1) + '%';
const light = ((detail.value.deviceStatus.type.light/typeSum)*100).toFixed(1) + '%';
const small = ((detail.value.deviceStatus.type.small/typeSum)*100).toFixed(1) + '%';
const middle = ((detail.value.deviceStatus.type.middle/typeSum)*100).toFixed(1) + '%';
const large = ((detail.value.deviceStatus.type.large/typeSum)*100).toFixed(1) + '%';
const local = useLocal()
const form = reactive({
    active: 0,
    data: {
        page: 1,
        pageSize: 0,
        sort: '',
        uid: local.usermsg.id == 3 ? 0 : local.usermsg.id == 3 ? 0 : local.usermsg.id
    },
    loading: false,
    detail: {},
    count: 0
} as any)
// 数据
const getData = async () => {
    const { code, data } = await apiIndexData({
        ...form.detail,
    })
    if (code != 200) return;
    form.detail = data
}
let timer: any
onBeforeMount(async () => {
    await getData()
    timer = setInterval(() => {
        getData()
    }, 3600000)
})
onBeforeUnmount(() => {
    clearInterval(timer)
    timer = null
})
</script>
<style scoped lang="less">
.data-menu-open {
    width: 160px;
    height: 60px;
    background-image: url('@/assets/images/hidden-wanzhou.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    border-radius: 2px;
    border: 1px solid rgba(46, 116, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;

    .title-font {
        font-family: YouSheBiaoTiHei;
        opacity: 1;
        /** 文本1 */
        font-size: 24px;
        font-weight: 500;
        letter-spacing: 0.48px;
        line-height: 24px;
        vertical-align: middle;
        background-image: -webkit-linear-gradient(bottom, rgb(153 218 252), #ffffff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.data-menu {
    // width: 100%;
    // margin: 10px 20px;
    // height: 457px;
    width: 290px;

    .title {
        width: 100%;
        height: 59px;
        background-image: url('@/assets/images/index-menue-title.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;

        .title-font {
            margin-left: 10px;
            font-family: YouSheBiaoTiHei;
            opacity: 1;
            /** 文本1 */
            font-size: 24px;
            font-weight: 500;
            letter-spacing: 0.48px;
            line-height: 24px;
            vertical-align: middle;
            background-image: -webkit-linear-gradient(bottom, rgb(153 218 252), #ffffff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }



        .delete {
            width: 35px;
            cursor: pointer;
            font-weight: 600;
            color: rgba(75, 127, 239, 1);
        }
    }

   
    .info-data {
        width: 100%;
        // height: 275px;
        border: 1px solid rgba(46, 116, 255, 0.8);
        border-top: unset;
        background: rgba(15, 19, 41, 0.85);
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        .info-top {
            width: 100%;
            height: 100%;
            display: flex;
            padding-top: 10px;
            justify-content: space-around;
            align-items: center;
            color: #fff;

            .info-today {
                width: 45%;

                .data {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .data-info {
                        text-align: center;
                        font-weight: 600;

                        .title1 {
                            color: #0099FF;
                            font-size: 15px;
                            font-weight: 700;
                        }

                        .title2 {
                            color: #00FF1A;
                            font-size: 15px;
                            font-weight: 700;
                        }

                        .title3 {
                            color: #FF0808;
                            font-size: 15px;
                            font-weight: 700;
                        }

                        .img-bg {
                            margin-top: 8px;
                            width: 55px;
                            height: 55px;
                            background-size: cover;
                            background-repeat: no-repeat;
                            background-position: center;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                        }

                        .img-bg1 {
                            background-image: url('@/assets/images/status-wanzhou1.png');
                        }

                        .img-bg2 {
                            background-image: url('@/assets/images/status-wanzhou2.png');
                        }

                        .img-bg3 {
                            background-image: url('@/assets/images/status-wanzhou3.png');
                        }
                    }
                }
            }
        }

        .info-mid {
            width: 100%;
            height: 100px;
            margin-top: 10px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            color: #fff;

            .info-today {
                width: 45%;

                .data {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    font-weight: 500;
                    font-size: 20px;

                    .data-info {
                        width: 64px;
                        height: 67px;
                        background-size: cover;
                        background-repeat: no-repeat;
                        background-position: center;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        padding-bottom: 20px;
                    }

                    .img-bg1 {
                        background-image: url('@/assets/images/deviceStatus-wanzhou1.png');
                    }

                    .img-bg2 {
                        background-image: url('@/assets/images/deviceStatus-wanzhou3.png');
                    }

                    .img-bg3 {
                        background-image: url('@/assets/images/deviceStatus-wanzhou2.png');
                    }

                    .text {
                        font-size: 14px;
                        font-weight: 700;
                        letter-spacing: 0px;
                        line-height: 20.27px;
                    }

                    .text1 {
                        color: #00FFEE;
                    }

                    .text2 {
                        color: #5EFF00;
                    }

                    .text3 {
                        color: #FF1212;
                    }

                }
            }
        }

        .info-bottom {
            margin: 10px 0 0 0;

            .info-bottom-item {
                padding: 0 15px;
                height: 30px;
                display: flex;

                .progress-box {
                    display: flex;
                    justify-content: space-between;

                    .type {
                        font-size: 13px;
                        font-weight: 700;
                        letter-spacing: 0px;
                        line-height: 20.27px;
                        text-align: left;
                        vertical-align: top;
                        margin-right: 8px;
                    }

                    .type1 {
                        color: #F1C702;
                    }

                    .type2 {
                        color: #FF612D;
                    }

                    .type3 {
                        color: #46D103;
                    }
                    .type4 {
                        color: #2A9FFF;
                    }

                    .type5 {
                        color: #7950F4;
                    }

                    .progress {
                        width: 185px;
                        height: 12px;
                        background: #090C24;
                        border-radius: 3px;
                        display: flex;

                        .progress-img {
                            height: 12px;
                            background-size: 100% 100%;
                            background-repeat: no-repeat;
                            background-position: center;
                            border-radius: 3px;
                        }

                        .progress-img1 {
                            background: linear-gradient(to right, #FCFF6C, #FF8A00);
                        }

                        .progress-img2 {
                            background: linear-gradient(to right, #FF782C, #FF3D00);
                        }

                        .progress-img3 {
                            background: linear-gradient(to right, #3ADE01, #31BC00);
                        }
                        .progress-img4 {
                            background: linear-gradient(to right, #0094FF, #25A1FF);
                        }

                        .progress-img5 {
                            background: linear-gradient(to right, #826DFF, #6E3AFF);
                        }
                        .progress-percent {
                            color: #fff;
                            margin-left: 4px;
                            font-size: 10px;
                        }
                    }
                }

                .num {
                    margin-left: 15px;
                    font-size: 13px;
                    font-weight: 700;
                    letter-spacing: 0px;
                    line-height: 20.27px;
                }

                .num1 {
                    color: #F1C702;
                }

                .num2 {
                    color: #FF612D;
                }

                .num3 {
                    color: #46D103;
                }
                .num4 {
                    color: #2A9FFF;
                }

                .num5 {
                    color: #7950F4;
                }
            }
        }

    }
}
</style>